<style type="text/css">
	#Content{
		background-color:#F0F0F0;
	}
	div.device-list{
		background-color:#FFF;
	}
	ul.list{
		margin:0 0.5rem;
	}
	a.list-item{
		text-decoration:none;
	}
	li.list-item{
		font-size:0;
		padding:0.25rem 0 0;
		overflow:hidden;
		border-bottom:1px solid #E9E9E9;
	}
	a.list-item:last-child li.list-item{
		border-bottom:0;
	}
	div.left-con{
		float:left;
		width:20%;
	}
	i.verdor-icon{
		font-size:1.25rem;
		display:inline-block;
		width:1.25rem;
		height:1.25rem;
	}
	div.right-con{
		float:right;
		width:80%;
	}
	a:last-child div.right-con{
		border-bottom:0;
	}
	p.list-con-l{
		font-size:0;
		float:left;
	}
	p.list-con-r{
		position:relative;
		color:#949494;
		font-size:0.4rem;
		float:right;
		max-width:2rem;
		text-align:right;
		min-width:2rem;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	p.list-con-r::before{
		content:"\A";
		white-space:pre;
	}
	span.speed-limit{
		color:#1389E7;
		position:absolute;
		top:0;
		right:0;
	}
	span.list-con1{
		color:#575757;
		font-size:0.417rem;
	}
	span.self{
		margin-left:0.2rem;
		font-size:0.4rem;
		color:#1389E7;
		vertical-align:top;
	}
	span.list-con1::after{
		content:"\A";
		white-space:pre;
	}
	span.list-con2{
		color:#949494;
		font-size:0.4rem;
	}
	span.speed-con{
		display:inline-block;
		width:2.5rem;
	}
	span.speed-con i{
		margin-right:0.1rem;
	}
	.icon_speed_up{
		color:#1499E6;
	}
	.icon_speed{
		color:#1FB66F;
	}
	span.mac{
		margin-left:0.2rem;
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local para = {device_manage = {client_list = {}}}
		local result = tpl_get_data(para, true)
		local remote_ip = luci.http.getenv("REMOTE_ADDR")
	-%>

	var info = <%=result%>;
	var curIp = "<%=remote_ip%>";
	var clients = info[K_MODULE].device_manage.client_list;
	var currentState = stateman.current.name;

	function JSON2UriParam(data){
		return $.param(data).replace(/\+/g, '%20');
	}

	function initOnlineEntry(client){
		var param = JSON2UriParam(client);
		var vendor;
		if(client.brand){
			vendor = "icon_" + getAlias(client.brand);
		}else{
			vendor = "icon_" + getVendor(client.mac);
		}

		var devName = htmlEscape(getStrInMax(client.name, 16));
		var uRate = netSpeedTrans(client.upload_speed);
		var dRate = netSpeedTrans(client.download_speed);
		var timeStr = timeTrans(client.online_time);
		var rightConStr = timeStr;

		if (client.ip == curIp){
			devName += '<span class="self">{%label.selfHost%}</span>';
		}

		if (0 != client.upload_limit || 0 != client.download_limit){
			rightConStr += '<span class="speed-limit">{%label.limitSpeed%}<span>';
		}

		/*
		if (0 == client.device_type){	// 暂不支持有线设备上下行速率的统计
			uRate = dRate = "----";
		}
		*/

		return '<a href="#/editClient/?' + param + '" class="list-item"><li class="list-item">' + 
			'<div class="left-con"><i class="verdor-icon ' + vendor + '"></i></div>' +
			'<div class="right-con">' + 
				'<p class="list-con-l">' +
					'<span class="list-con1">' + devName + '</span>'+
					'<span class="list-con2 speed-con"><i class="icon_speed_up"></i><span>' + uRate + '</span></span>' +
					'<span class="list-con2 speed-con"><i class="icon_speed"></i><span>' + dRate + '</span></span>' +
				'</p>' +
				'<p class="list-con-r">' + rightConStr + '</p>' +
			'</div>' +
		'</li></a>';
	}

	function initForbidEntry(client){
		var param = JSON2UriParam(client);
		var vendor;
		if(client.brand){
			vendor = "icon_" + getAlias(client.brand);
		}else{
			vendor = "icon_" + getVendor(client.mac);
		}

		var devName = htmlEscape(getStrInMax(client.name, 16));

		return '<a href="#/editClient/?' + param + '" class="list-item"><li class="list-item">' + 
			'<div class="left-con"><i class="verdor-icon ' + vendor + '"></i></div>' +
			'<div class="right-con">' + 
				'<p class="list-con-l">' +
					'<span class="list-con1">' + devName + '</span>'+
					'<span class="list-con2">{%label.mac%}<span class="mac">' + client.mac + '</span></span>' +
				'</p>' +
			'</div>' +
		'</li></a>';
	}

	var onlineListObj = $("#onlineList");
	var offlineListObj = $("#offlineList");
	var forbidListObj = $("#forbidList");
	var forbidTitleObj = $("#ForbidTitle");
	var offlineTitle = $("#OfflineTitle");

	function initList(clients){
		onlineListObj.empty();
		offlineListObj.empty();
		forbidListObj.empty();
		forbidTitleObj.hide();
		offlineTitle.hide();

		var len = clients.length;
		for (var i = 0; i < len; i++){
			if (0 == clients[i].internet_enable) {
				forbidTitleObj.show();
				forbidListObj.append(initForbidEntry(clients[i]));
			}else{
				if (1== clients[i].online_status){
					onlineListObj.append(initOnlineEntry(clients[i]));
				}else{
					offlineTitle.show();
					offlineListObj.append(initForbidEntry(clients[i]));
				}
			}
		}
	}

	function refreshDevList(){
		var data = {
			device_manage:{client_list:null}
		};

		apiGet(data, function(result){
			if (currentState != stateman.current.name){
				return;
			}

			var errNo = result[ERR_CODE];

			if (E_NONE == errNo){
				clients = result[K_MODULE]["device_manage"]["client_list"];
				initList(clients);
			}else{
				console.log(result);
			}

			$.setTimeout(refreshDevList, 1000);
		});
	}

	initList(clients);
	$.setTimeout(refreshDevList, 1000);
})();
</script>
<div class="head-con">
	<a href="javascript:logout();" class="head-btn-l">{%btn.logout%}</a>
	<h1 class="head-title">{%label.devManage%}</h1>
</div>
<div class="device-list below-head">
	<ul class="set-con-title" id="OnlineTitle">
		<label class="title-desc-lbl" id="WifiName">{%label.onlineClient%}</label>
	</ul>
	<ul id="onlineList" class="list"></ul>
	<ul class="set-con-title hidden" id="OfflineTitle">
		<label class="title-desc-lbl" id="WifiName">{%label.offlineClient%}</label>
	</ul>
	<ul id="offlineList" class="list"></ul>
	<ul class="set-con-title hidden" id="ForbidTitle">
		<label class="title-desc-lbl" id="WifiName">{%label.forbidClient%}</label>
	</ul>
	<ul id="forbidList" class="list"></ul>
</div>